<template>
  <div class="f2bpm-page-layout">
    <el-container>
      <el-aside class="f2bpm-page-left" ref="sideLeft" hide-trigger collapsible :width="isCollapsed?'20px':'250px'">
        <div class="f2bpm-panel-head">
          <div v-if="!isCollapsed" class="f2bpm-left-search-div">
            <el-input style="border: 0px;" size="mini" clearable placeholder="输入关键字搜索" autocomplete="off" prefix-icon="el-icon-search" v-model="treeFilterText">
            </el-input>
          </div>
          <div style=" float: right;line-height:35px;padding-right: 5px;">
            <i v-if="!isCollapsed" title="刷新" class="fa fa-refresh  cur ml10 font12 " @click="loadTree()"></i>
            <i title="收起/展开" @click="collapsedSider" :class="rotateIcon"></i>
          </div>
        </div>
        <div class="f2bpm-page-left-content mt4" v-if="!isCollapsed">
          <el-tree ref="mytree" :data="treeData" :filter-node-method="filterTreeNode" :expand-on-click-node="false" default-expand-all @node-click="onTreeSelected"></el-tree>
        </div>
      </el-aside>
      <el-aside class="f2bpm-selector-page-right" ref="sideRight" width="260px">
        <div style="padding-left: 3px;height: 340px;">
          <f2bpm-datagrid ref="gridResult" grid="gridResult" height="full-40" :data="resultGridData" :columns="resultGridColumn">
          </f2bpm-datagrid>
          <div>
            <span id="clearEmpty2" @click="clearAll()" class="cur"><i class="fa fa-minus-circle"></i>清空所选</span>
          </div>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
  export default {
    watch: {
      treeFilterText(val) {
        this.$refs.mytree.filter(val);
      }
    }
    , computed: {
      countGridHeight() {
        return $(document).height() - global_selector_datagridHeightDiff;
      }
      , rotateIcon() {
        return this.isCollapsed ? 'fa fa-angle-double-right' : 'fa fa-angle-double-left';
      }
    }
    , created() {
      this.loadTree();
      this.loadWindowparms();
    }
    , data() {
      return {
        windowparms: { resultFieldKey: 'groupId',needRoot:false,data:[]},
        //======stand:标准区=============
        treeFilterText: '',
        isCollapsed: false,
        //==data grid====
        dg: {},
        tablePage: Object.toClone(FUI.DataGridProperty.tablePage),
        loading: false,
        treeData: [],
        tableData: [],
        tableForm: Object.toClone(FUI.DataGridProperty.tableForm),
        tableToolbar: Object.toClone(FUI.DataGridProperty.tableToolbar),
        headerMenus: Object.toClone(FUI.DataGridProperty.headerMenus),
        tableColumn: []

        //===========标准区结束==========
        , searchParams: {
          //特殊查询
          CategoryCode: ''
        }
        //=======选择结果Grid===========
        , resultGridData: []
        , resultGridColumn: [{
          field: 'value',
          title: '值',
          hidden: true,
          align: 'center'
        }, {
          field: 'text',
          title: '部门名称',
          align: 'center'
        }, {
          field: 'action',
          title: '操作',
          width: 50,
          type: 'html',
          align: 'center',
          slots: {
            // 使用 JSX 渲染函数
            default: ({ row, column }, h) => {
              return [
                h('button', {
                  attrs: { title: '删除' }
                  , class: 'btn btn-minier btn-grey mr2 fa fa-trash'
                  , on: {
                    click: () => this.delRow(row.value)
                  }
                }, '')];
            }
          }
        }]
      };
    },

    methods: {
      collapsedSider() {
        this.isCollapsed = this.isCollapsed ? false : true;
      }
      , loadWindowparms() {
        let that = this;
        var parmsStr = Object.toQueryString("parms");
        var parms = {};
        if (parmsStr) {
          parmsStr = decodeURIComponent(parmsStr);
          parms = eval("(" + parmsStr + ")");
          if (parms.data != undefined && parms.data.length > 0) {
            that.windowparms.data = parms.data;
            that.resultGridData = parms.data;
          }
          if (parms.singleSelect != undefined) {
            that.windowparms.singleSelect = parms.singleSelect;

          }
          if (parms.resultFieldKey != undefined) {
            that.windowparms.resultFieldKey = parms.resultFieldKey;
          }
          if (parms.needRoot != undefined) {
            that.windowparms.needRoot = parms.needRoot;
          }
        }
      }
      , onTreeSelected(data, treeNode, thisObj) {
        var that = this;
        var attributes = data.attributes;
        
        var value = attributes[that.windowparms.resultFieldKey];
        var text = treeNode.data.title;
        this.addSelect({ value: value, text: text });
      }
      , filterTreeNode(value, data) {
        if (!value) return true;
        return data.title.indexOf(value) !== -1;
      }
      , loadTree() {
        var that = this;
        var treeUrl = FUI.Handlers.OrgImplController + "getOrgList/?needRoot=" + that.windowparms.needRoot;
        Object.toAjaxJson(treeUrl, null, null, true, null, function (res) {
          if (res.success) {
            that.treeData = res.data;
            var msg = res.msg;
          } else {
             FUI.Window.showMsg(res.msg);
          }
        });
      }
      //stand:选对结果区==================
      , addSelect(row) {
        let that = this;
        let keyId = "value";
        if (that.windowparms.singleSelect) {
          let tem = [];
          tem.push(row);
          that.resultGridData = tem;
        } else {
          let isExist = false;
          $.each(that.resultGridData, function (i, item) {
            if (item[keyId] == row[keyId]) {
              isExist = true;
            }
          });
          if (isExist === false) {
            that.resultGridData.push(row);
          }
        }
      }
      , delRow(delKeyId) {
        let that = this;
        let keyId = "value";
        var tem = [];
        $.each(that.resultGridData, function (i, item) {
          if (item[keyId] != delKeyId) {
            tem.push(item);
          }
        });
        that.resultGridData = tem;
      }
      , getResult() {
        return this.resultGridData;
      }
      , clearAll() {
        this.resultGridData = [];
      }
    }
    , mounted() {
      window.myvm=this;
    }
  }

  window.getResult = function () {
    return myvm.getResult();
  }
</script>